let storage = window.localStorage;
import * as dom from "./dom.js";
import * as request from "./request.js";
const windowHeight = window.innerHeight;
export function header(elementId) {
  const e = document.getElementById(elementId);
  if (!e) {
    console.log("[WARNING] no this element:", elementId);
    return;
  }
  e.style.backgroundColor = '#666';
  e.style.textAlign = 'center';
  e.style.color = 'white';
  e.style.boxSizing = 'border-box';
  e.style.height = `32px`;
  //e.style.padding = '30px';
  //e.style.fontSize = '35px';
}
export function section(elementId) {
  const e = document.getElementById(elementId);
  if (!e) {
    console.log("[WARING] no this element:", elementId);
    return;
  }
  e.style.boxSizing = 'border-box';
  e.style.overflow = 'scroll';
  //e.style.height = '9px';
  //e.style.padding = '20px';  // 添加内边距

  const a = document.createElement('div');
  a.style.content = '""';
  a.style.clear = 'both';
  a.style.display = 'table';
  e.appendChild(a);
}
export function nav(elementId) {
  const e = document.getElementById(elementId);
  if (!e) {
    console.log("[WARNING] no this element:", elementId);
    return;
  }
  e.style.float = 'left';
  e.style.width = '20%';
  //e.style.height = `${windowHeight * 0.9 - 32}px`;
  e.style.height = `${windowHeight * 0.86}px`;
  e.style.background = '#ccc';
  //e.style.padding = '20px';
  e.style.boxSizing = 'border-box';
}
export function ul(elementId) {
  const e = document.getElementById(elementId);
  if (!e) {
    console.log("[WARNING] no this element:", elementId);
    return;
  }
  e.style.height = `${windowHeight * 0.86}px`;
  e.style.overflow = 'scroll';
}
export function article(elementId) {
  const e = document.getElementById(elementId);
  if (!e) {
    console.log("[WARNING] no this element:", elementId);
    return;
  }
  //e.style.float = 'left';
  e.style.width = '80%';
  e.style.height = `${windowHeight * 0.86}px`;
  //e.style.background = '#ccc';
  //e.style.padding = '20px';
  e.style.boxSizing = 'border-box';
  e.style.overflow = 'scroll';
}
export function footer(elementId) {
  const e = document.getElementById(elementId);
  if (!e) {
    console.log("[WARING] no this element:", elementId);
    return;
  }
  e.style.backgroundColor = '#777';
  //e.style.padding = '10px';
  e.style.textAlign = 'center';
  e.style.color = 'white';
  e.style.boxSizing = 'border-box';
  //e.style.height = '32px';
  var notice = document.createElement("p");
  e.appendChild(notice);
}
export function updateFloatingHeight(elementId, value) {
  const windowHeight = window.innerHeight;
  const e = document.getElementById(elementId);
  if (!e) {
    console.log("[WARING] no this element:", elementId);
    return;
  }
  e.style.height = `${windowHeight * value}px`;
  console.log("resize:", e.style.height);
}
export function standard() {
  header("header");

  section("section");
  nav("nav");
  ul("ul");
  article('article');

  footer("footer");
}
/*
  layout.header("header");

  layout.section("section");
  layout.nav("nav");

  layout.footer("footer");
  */
export function xml2nav_ul(elementId, message, func) {
  var h = document.getElementById("header");
  var e = document.getElementById(elementId);
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(message, "text/xml");
  var root = xmlDoc.documentElement;
  h.innerHTML = root.getAttribute("dbName");
  var child = root.childNodes[0];
  var elementNode = dom.get_nextsibling(child);
  var children = root.childNodes;
  if (1) {
    for (const node of children) {
      if (node.nodeType != node.ELEMENT_NODE) {
        continue;
      }
      //const clonedNode = node.cloneNode(true);
      var li = document.createElement("li");
      e.appendChild(li);
      var attributes = node.attributes;
      for (var j = 0; j < attributes.length; j++) {
        var attrName = attributes[j].name;  // 属性名
        var attrValue = attributes[j].value;  // 属性值
        //console.log("属性名称: " + attrName + ", 属性值: " + attrValue);
        if (attrName == 'name') {
          var a = document.createElement("a");
          //a.href = '/' + attrValue;
          a.href = '#';
          //console.log('value:', attrValue);
          //a.onclick = updateContent(attrValue);
          a.title = attrValue;
          a.onclick = function() {
            var target = event.target;
            console.log('a.title:', target.title);
            storage.tableName = target.title;
            func(target.title);
          }
          a.innerHTML = attrValue;
          li.appendChild(a);
        }
      }
    }
  }
}
export function xml2article(elementId, message, func) {
  var e = document.getElementById(elementId);
  if (!e) {
    console.log("[DEBUG] no this element:", elementId);
    return;
  }
  while (e.firstChild) {
    e.removeChild(e.firstChild);
  }
  var tn = document.getElementById("title");
  tn.style.textAlign = 'center';
  if (storage.tableName) {
    tn.innerText = storage.tableName;
  } else {
    tn.innerText = "table list";
  }
  tn.innerText += "---->:";
  var table = document.createElement("table");
  e.appendChild(table);
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(message, "text/xml");
  var root = xmlDoc.documentElement;
  var child = root.childNodes[0];
  if (!child)
    return;
  var elementNode = dom.get_nextsibling(child);
  var children = root.childNodes;

  var rowCount = table.rows.length;
//header
  {
    var thead = document.createElement("thead");
    table.appendChild(thead);
    var tr = document.createElement("tr");
    thead.appendChild(tr);
    //var row = table.insertRow(rowCount);
    var attributes = elementNode.attributes;
    for (var j = 0; j < attributes.length; j++) {
      var attrName = attributes[j].name;
      var label = document.createElement("label");
      label.innerText = attrName;
      var th = document.createElement("th");
      th.appendChild(label);
      tr.appendChild(th);
    }
    thead.style.position = 'sticky';
    thead.style.top = '0';
    thead.style.width = '100%';
    thead.style.zIndex = '10';
    thead.style.backgroundColor = '#f2f2f2';
    rowCount++;
  }
  if (1) {
    var tbody = document.createElement("tbody");
    table.appendChild(tbody);
    for (const node of children) {
      if (node.nodeType != node.ELEMENT_NODE) {
        continue;
      }
      //const clonedNode = node.cloneNode(true);
      tr = document.createElement("tr");
      tr.id = 'tr' + rowCount;
      var attributes = node.attributes;
      for (var j = 0; j < attributes.length; j++) {
        var attrName = attributes[j].name;  // 属性名
        var attrValue = attributes[j].value;  // 属性值
        //console.log("属性名称: " + attrName + ", 属性值: " + attrValue);
        var td = document.createElement("td");
        if (attrName == 'id') {
          var cell = document.createElement("label");
          cell.id = attrName + rowCount;
          cell.value = attrValue;
          cell.innerText = attrValue;
        } else {
          var cell = document.createElement("input");
          cell.id = attrName + rowCount;
          cell.type = 'text';
          cell.name = attrName;
          cell.value = attrValue;
          cell.innerText = attrValue;
        }
        td.appendChild(cell);
        tr.appendChild(td);
      }
      if (func) {
        td = document.createElement("td");
        const form = document.createElement("form");
        form.action = "/submit";
        form.method = "POST";
        form.id = 'form' + rowCount;
        form.addEventListener('submit', function(event) {
          event.preventDefault();
          var target = event.target;
          console.log('targetId:', target.id);
          let id = target.id;
          var elementId = id.replace("form", "tr");
          console.log('elementId:', elementId);
          var n = document.getElementById(elementId);
          console.log('tr.outerHTML:', n.outerHTML);
          var xmlString = dom.tableNode2sql_update_xml_str(n);
          console.log('node data:', xmlString);
          //request.post_callback("/update", xmlString, 'article', func);
        });

        const button = document.createElement("button");
        button.type = "submit";
        button.textContent = "提交";
        form.appendChild(button);
        td.appendChild(form);
        tr.appendChild(td);
      }
      rowCount++;
      tbody.appendChild(tr);
    }
    //tbody.style.position = 'fixed';
    //tbody.style.top = '32';
    //tbody.style.width = '100%';
    //tbody.style.zIndex = '10';
    //tbody.style.backgroundColor = '#f2f2f2';
    //table.appendChild(tbody);
  }
}
/*
<form action="/action_page.php">
  <label for="myfile">Select files:</label>
  <input type="file" id="myfile" name="myfile" multiple><br><br>
  <input type="submit">
</form>
*/
export function upload_file() {
  console.log("func:upload_file");
  var form = document.createElement('form');
  form.action = "/uploadFiles";
  form.method = "POST";
  form.enctype="multipart/form-data";
  var label = document.createElement('label');
  label.setAttribute("for", "myfile");
  label.textContent = "Select files:";
  form.appendChild(label);
  var input = document.createElement('input');
  input.type = "file";
  input.id = "myfile";
  input.name = "myfile";
  form.appendChild(input);
  var br = document.createElement('br');
  //br = document.createElement('br');
  form.appendChild(br);
  form.appendChild(br);
  var submit = document.createElement('input');
  submit.type = "submit";
  form.appendChild(submit);
  return form;
}
